<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
			<el-form-item label="角色名称" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="权限">
				<el-tree
					:data="treeData"
					ref="tree"
					show-checkbox
					:default-checked-keys="resourceCheckedKey"
					node-key="id"
					:props="defaultProps">
				</el-tree>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio v-model="form.status" :label="1">正常</el-radio>
				<el-radio v-model="form.status" :label="2">禁用</el-radio>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="optSubmit('ruleForm')" :loading="loading">确 定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增角色',
				edit: '编辑角色',
				show: '查看'
			},
			form: {
				id: 0,
				name: '',
				role_node: '',
				status: 1
			},
			defaultProps: {
				label: 'name',
				children: 'children'
			},
			rules: {
				name: [
					{required: true, message: '请输入角色名称', trigger: 'blur'}
				]
			},
			treeData: [],
			resourceCheckedKey: [],
			loading: false,
			visible: false
		}
	},
	mounted() {

		if (this.mode == 'add') {
			this.getAllRolesAdd()
		}
	},
	watch: {
		mode(newVal) {
			if (newVal == 'add') {
				this.getAllRolesAdd()
			} else {
				this.getAllRolesEdit()
			}
		}
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单提交方法
		optSubmit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.loading = true
					let res;
					let checkedNodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
					let nodesMap = []
					checkedNodes.forEach(item => {
						nodesMap.push(item.id)
					})
					this.form.role_node = nodesMap.join(',')
					if (this.mode == 'add') {
						res = await this.$API.role.add.post(this.form)
					} else {
						res = await this.$API.role.edit.post(this.form)
					}
					this.loading = false

					if (res.code == 0) {
						this.$message.success(res.msg)
						this.$emit('success')
					} else {
						this.$message.error(res.msg)
					}
				} else {
					return false;
				}
			})
		},
		// 获取所有的角色 -add
		async getAllRolesAdd() {
			let res = await this.$API.role.getRolesAddInfo.get()
			this.treeData = res.data
		},
		async getAllRolesEdit() {
			let res = await this.$API.role.getRolesEditInfo.get()
			this.treeData = res.data

			function getIds(arr, result = []) {
				arr.forEach(item => {
					if (item.children && item.children.length !== 0) {
						result.push(item.id)
						if (item.children.length) {
							return getIds(item.children, result)
						}
					}
				})

				return result
			}

			this.getParId = getIds(res.data)

			// 筛选不是父级节点的id
			this.resourceCheckedKey = this.form.role_node.split(',').filter(item => {
				if (!this.getParId.includes(parseInt(item))) {
					return item
				}
			})
		},
		// 表单注入数据
		setData(item) {
			this.form.id = item.id
			this.form.name = item.name
			this.form.role_node = item.role_node
			this.form.status = item.status
		}
	}
}
</script>

<style scoped>
p {
	padding: 0;
	margin: 0;
}

.el-table__header tr,
.el-table__header th {
	padding: 0;
	height: 20px;
	line-height: 20px;
}

.del-btn {
	cursor: pointer;
	color: #F56C6C
}

.add-btn {
	cursor: pointer;
	margin-top: 18px;
	color: #409EFF
}

.img-list {
	height: 60px;
	padding-left: 0;
	margin-top: 0;
}

.img-list li:first-child {
	margin-left: 0;
}

.img-list li {
	width: 58px;
	height: 58px;
	float: left;
	margin-left: 5px;
	cursor: pointer;
	position: relative;
}

.addImg {
	height: 56px;
	width: 56px;
	line-height: 56px;
	text-align: center;
	border: 1px dashed rgb(221, 221, 221);
}

ul li {
	list-style: none
}

.image-check-dialog .el-dialog__header {
	display: none
}

.image-check-dialog .el-dialog__body {
	padding: 0;
}

.img-list .img-tools {
	position: absolute;
	width: 58px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 43px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
</style>
